<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>毕业设计选题管理系统·注册</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: beige;
        }

        #app {
            height: 100%;
            background-color: beige;
        }

        #app > .main {
            width: 500px;
            height: auto;
            padding-bottom: 25px;
            background-color: #FFFFFF;
            box-shadow: 0 0 14px #CCCCCC;
            border-radius: 7px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #app > .main > .title {
            display: block;
            text-align: center;
            padding: 25px 25px 30px;
            font-weight: bolder;
            font-size: 32px;
        }

        #app > .main > .input-box {
            height: auto;
        }

        #app > .main > .input-box > div {
            text-align: center;
        }

        #app > .main > .input-box > div > label > input {
            width: 250px;
            height: 30px;
            margin-bottom: 25px;
            border: 1px solid #FFFFFF;
            border-bottom: 1px solid #777777;
            outline: none;
            font-size: 16px;
        }

        #app > .main > .input-box > div > label > select {
            width: 252px;
            height: 32px;
            margin-bottom: 25px;
            border: 1px solid #FFFFFF;
            border-bottom: 1px solid #777777;
            outline: none;
            font-size: 16px;
        }

        #app > .main > .input-box > div > #login {
            width: 250px;
            height: 40px;
            outline: none;
            font-size: 16px;
            margin-bottom: 25px;
            border: none;
            color: #FFFFFF;
            cursor: pointer;
            background-color: #97a89d;
            transition: 300ms ease all;
        }

        #app > .main > .input-box > div > #login:hover {
            background-color: rgba(102, 204, 255, 0.75);
        }

        #app > .main > .input-box > div > #register {
            width: 250px;
            height: 40px;
            outline: none;
            font-size: 16px;
            margin-bottom: 25px;
            border: none;
            color: #FFFFFF;
            cursor: pointer;
            background-color: #6666FF;
            transition: 300ms ease all;
        }

        #app > .main > .input-box > div > #register:hover {
            background-color: rgba(102, 102, 255, 0.75);
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/static/css/message.css"/>
</head>
<body>

<div id="app">
    <div class="main">
        <span class="title">注册账号</span>
        <form id="register-form" action="/" method="post" class="input-box">
            <div>
                <label>
                    <select id="user-role-id" required>
                        <option value="">-请选择角色-</option>
                        <option value="5">教师</option>
                        <option value="6">学生</option>
                    </select>
                </label>
            </div>
            <div>
                <label>
                    <select id="department-id" required>
                        <option value="">-请选择学院-</option>
                    </select>
                </label>
            </div>
            <div>
                <label>
                    <select id="specialty-id" required>
                        <option value="">-请选择专业-</option>
                    </select>
                </label>
            </div>
            <div>
                <label>
                    <input id="account" type="text" autocomplete="off" required minlength="2" maxlength="16"
                           placeholder="请输入账号">
                </label>
            </div>
            <div>
                <label>
                    <input id="password" type="password" autocomplete="off" required minlength="2" maxlength="32"
                           placeholder="请输入密码">
                </label>
            </div>
            <div>
                <label>
                    <input id="name" type="text" autocomplete="off" required minlength="2" maxlength="8"
                           placeholder="请输入姓名">
                </label>
            </div>
            <div>
                <label>
                    <select id="gender" required>
                        <option value="">-请选择性别-</option>
                        <option value="true">男</option>
                        <option value="false">女</option>
                    </select>
                </label>
            </div>
            <div>
                <label>
                    <input id="phone" type="tel" autocomplete="off" required minlength="11" maxlength="11"
                           placeholder="请输入手机">
                </label>
            </div>
            <div>
                <label>
                    <input id="email" type="email" autocomplete="off" required minlength="2" maxlength="32"
                           placeholder="请输入邮箱">
                </label>
            </div>
            <div>
                <label>
                    <input id="qq" type="number" autocomplete="off" required minlength="2" maxlength="16"
                           placeholder="请输入QQ号">
                </label>
            </div>
            <div>
                <label>
                    <input id="dingding" type="text" autocomplete="off" required minlength="2" maxlength="16"
                           placeholder="请输入钉钉号">
                </label>
            </div>
            <div>
                <button type="submit" id="register">注册</button>
            </div>
            <div>
                <button id="login">登录</button>
            </div>
        </form>
    </div>
</div>

<script src="/static/js/jquery-3.6.1.js" type="text/javascript"></script>
<script src="/static/js/message.js" type="text/javascript"></script>
<script type="application/javascript">
    $(function () {
        // 初始操作
        loadDepartmentList();

        // 加载学院数据
        function loadDepartmentList() {
            // 获取元素
            let departmentIdEle = $('#department-id');

            // 获取数据
            $.ajax({
                url: '/api/department/list',
                type: "GET",
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        departmentIdEle.html($('<option value="">-请选择学院-</option>'));
                        res.data.forEach(item => {
                            departmentIdEle.append($(`<option value="${item.id}">${item.name}</option>`));
                        });
                        departmentIdEle.change(loadSpecialtyList);
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 加载专业数据
        function loadSpecialtyList() {
            // 获取元素
            let specialtyIdEle = $('#specialty-id');
            let departmentIdEle = $('#department-id');

            // 获取数据
            $.ajax({
                url: '/api/specialty/list',
                type: "GET",
                data: {
                    departmentId: departmentIdEle.val()
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        specialtyIdEle.html($('<option value="">-请选择专业-</option>'));
                        res.data.forEach(item => {
                            specialtyIdEle.append($(`<option value="${item.id}">${item.name}</option>`));
                        });
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 跳转到登录页
        $('#login').click(function () {
            window.location.href = "/static/login.html";
        });

        // 监听注册表单
        $('#register-form').submit(function (e) {
            // 获取表单数据
            let input_user_role_id = $('#user-role-id').val();
            let input_department_id = $('#department-id').val();
            let input_specialty_id = $('#specialty-id').val();
            let input_account = $('#account').val();
            let input_password = $('#password').val();
            let input_name = $('#name').val();
            let input_gender = $('#gender').val();
            let input_phone = $('#phone').val();
            let input_email = $('#email').val();
            let input_qq = $('#qq').val();
            let input_dingding = $('#dingding').val();

            // 提交注册请求
            $.ajax({
                url: '/api/user/register',
                type: "POST",
                data: {
                    'departmentId': input_department_id,
                    'specialtyId': input_specialty_id,
                    'userRoleId': input_user_role_id,
                    'account': input_account,
                    'password': input_password,
                    'userInfo.name': input_name,
                    'userInfo.gender': input_gender,
                    'userInfo.phone': input_phone,
                    'userInfo.email': input_email,
                    'userInfo.qq': input_qq,
                    'userInfo.dingding': input_dingding
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        $.message({
                                type: 'success', content: res.msg, onClose: function () {
                                    window.location.href = "/static/login.html";
                                }
                            }
                        );
                    } else {
                        $.message({
                                type: 'error', content: res.msg, onClose: function () {
                                    window.location.reload();
                                }
                            }
                        );
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>